<template>
  <div class="shop">
    <el-table :data="tableData" style="width:100%"  max-height="600" :cell-style="tc" :header-cell-style="tccolor">
    <el-table-column prop="id" label="编号ID" ></el-table-column>

    <el-table-column  prop="title" label="营销插件名称" ></el-table-column>
    <el-table-column prop="history_up_activity_count" label="历史关联上线活动数" ></el-table-column>
    <el-table-column  label="当前关联上线活动数" >
      
       <template slot-scope="scope">
       {{scope.row.current_up_activity_count}}  <p  class="lookup" @click="lookupShoplist()">(查看)</p>
    </template>
    </el-table-column>

    <el-table-column prop="status" label="状态" >
         <template slot-scope="scope">
              <el-switch :key="scope.row.id" :active-value='1' :inactive-value='0' :value="scope.row.status" @change="isUseActivityChange(scope.row.id,$event)"></el-switch>
              <p class="status—desc" v-if="scope.row.status == '1'">已启用</p>
              <p class="status—desc" v-else>已禁用</p>
            </template>
    </el-table-column>
    </el-table>

    <!-- <el-col :span="24">
        <div class="pagination">
          <el-pagination
            background
            @current-change="pageChange"
            :current-page="page"
            :page-size="20"
            layout="total, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-col> -->
  </div>
</template>

<script>
import {activityMarketToolData, activityMarketToolUpdate} from "@/api/activity"
  export default {
      data(){
           return{
            //  page:1,
            //  total:0,
            tableData:[]
           }
      },
      mounted (){
         this.getactivityMarketToolData()
      },
      methods:{
    async  getactivityMarketToolData(){
      let res =  await activityMarketToolData()
      if(res.code === 10000){
          this.tableData = res.data
          // this.total = 
      }else{
         this.$message.error(res.message)
      }
    },
    async getactivityMarketToolUpdate(id,status){
      let res  = await activityMarketToolUpdate(id,{'status':status})
      console.log(res)
      if(res.code === 10000){
        this.$message.success('编辑成功')
        this.getactivityMarketToolData()
      }else{
        this.$message.error(res.message)
      }
    },
            //更改活动禁用状态
      isUseActivityChange(id,e){
           //更新商品
            console.log(id,e)
           //更新成功后重新获取商品
           this.getactivityMarketToolUpdate(id,e)
      },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },

        //跳转到小店列表
        lookupShoplist(){
           this.$router.push({path:'./activelist',query:{status:'50'}})
        },
      }
  }
</script>

<style lang="scss" scoped>
   .shop{
     padding: 20px;
     position: relative;
   }
   p{
          display: inline;
          margin-left: 5px;
   }
   .lookup{
     color: #F4222D;
     cursor: pointer;
   }
   .pagination{
     float: right;
     margin-top: 15px;
   }
</style>